<template>
	<view class="page">
		<!-- 搜索框 -->
		<view class="search-box">
			<input placeholder="输入关键词搜索门店" v-model="searchQuery" @confirm="search" />
			<!-- <button type="primary" icon="search" @click="search">搜索</button> -->
		</view>

		<!-- 轮播图 -->
		<swiper class="banner-swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true">
			<swiper-item v-for="(item, index) in bannerImages" :key="index">
				<image :src="item" mode="aspectFill" class="banner-image"></image>
			</swiper-item>
		</swiper>

		<!-- 列表项 -->
		<view class="tab-container">
			<tabs v-model="activeTab" type="card">
				<tab label="附近" name="nearby">
					<view v-for="item in nearbyItems" :key="item.id" class="item-card">
						<view class="item-logo">
							<image :src="item.logo" mode="aspectFit"></image>
						</view>
						<view class="item-content">
							<view class="card-header">
								<text>{{ item.name }}</text>
								<text class="distance">{{ item.distance }}km</text>
							</view>
							<text>{{ item.description }}</text>
						</view>
					</view>
				</tab>
				<tab label="最新" name="latest">
					<view v-for="item in latestItems" :key="item.id" class="item-card">
						<view class="item-logo">
							<image :src="item.logo" mode="aspectFit"></image>
						</view>
						<view class="item-content">
							<view class="card-header">
								<text>{{ item.name }}</text>
								<text class="distance">{{ item.distance }}km</text>
							</view>
							<text>{{ item.description }}</text>
						</view>
					</view>
				</tab>
			</tabs>
		</view>

		<!-- 底部导航栏 -->
		<!-- <view class="bottom-nav">
      <navigator url="/pages/home/home" hover-class="navigator-hover">
        <image src="/static/home.png" mode="aspectFit"></image>
        <text>首页</text>
      </navigator>
      <navigator url="/pages/profile/profile" hover-class="navigator-hover">
        <image src="/static/user.png" mode="aspectFit"></image>
        <text>我的</text>
      </navigator>
    </view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			searchQuery: '',
			activeTab: 'nearby',
			bannerImages: [
				'/static/image@2x.png',
				'/static/image@2x.png',
				'/static/image@2x.png'
			],
			nearbyItems: [
				{
					id: 1,
					name: '杨铭宇黄焖鸡米饭',
					logo: '/static/image.png',
					description: '济南杨铭宇餐饮管理有限公司\n济南市历下区龙奥北路1577号阳光金融中心大楼13层',
					distance: '3.8'
				},
			],
			latestItems: [
				{
					id: 2,
					name: '通达汽车维修',
					logo: '/static/image.png',
					description: '北京京东世纪贸易有限公司\n北京亦庄经济技术开发区科创十一街18号院',
					distance: '6.8'
				},
			]
		};
	},
	methods: {
		search() {
			// Search logic
		}
	}
};
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.search-box {
	width: 350px;
	height: 40px;
	border: 1px solid #ccc;
	border-radius: 25px;
	display: flex;
	align-items: center;
	margin: 20rpx;
	padding: 0 15px;
	background-color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.banner-swiper {
	width: 350px;
	height: 400rpx;
	margin: 20rpx 0;
	border-radius: 20rpx;
	overflow: hidden;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
	background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
}

.banner-image {
	width: 100%;
	height: 100%;
	border-radius: 20rpx;
}

.item-card {
	padding: 20rpx;
	border-radius: 15rpx;
	background-color: #fff;
	margin: 20rpx;
	display: flex;
	justify-content: space-between;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}

.item-logo {
	width: 100px;
	height: 100px;
	margin: 10px;
}

.item-logo image {
	width: 100%;
	height: 100%;
}

.item-content {
	/* margin-left: 20rpx; */
	width: 230px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: flex-start;
}

.card-header {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10rpx;
}

.distance {
	color: #999;
}

.bottom-nav {
	display: flex;
	justify-content: space-around;
	padding: 20rpx;
	background-color: #f5f5f5;
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
}

.navigator-hover {
	background-color: #ddd;
}
</style>